<template>
	<view v-if="show">
		<uni-popup ref="orgPickRef" @maskClick="closePopup()">
			<view class="popup-bd">
				<view class="popup-title">
					{{ title }}
					<uni-icons
						type="closeempty"
						size="50rpx"
						color="#666666"
						class="popup-close"
						@click="closePopup()"
					></uni-icons>
				</view>
				<view
					class="popup-content"
					:class="
						select && select.length > 0
							? 'popup-content-selected'
							: ''
					"
				>
					<serach-button
						v-if="type === 'user'"
						@serachInput="serachInput"
						:placeholder="'输入姓名搜索'"
					></serach-button>
					<view>
						<view v-if="serachName">
							<view v-if="searchUsers && searchUsers.length > 0">
								<view
									v-for="user in searchUsers"
									:key="user.id"
								>
									<view class="df ac jsb node-item">
										<view
											class="df ac"
											@tap="selectChange(user)"
										>
											<radio
												:checked="user.selected"
												color="#3A9BFF"
												style="transform: scale(0.7)"
											/>
											<view class="flex-center">
												<avatar
													:fontsize="28"
													:width="60"
													:name="
														user.name.length > 2
															? user.name.substr(
																	user.name
																		.length -
																		2,
																	2
															  )
															: user.name
													"
												></avatar>
												<view class="ml10 c6">{{
													user.name
												}}</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view v-else style="margin-top: -200rpx">
								<diy-empty></diy-empty>
							</view>
						</view>
						<view v-else>
							<view
								class="df ac jsb mt20 node-item"
								v-if="deptStack && deptStack.length > 0"
							>
								<view class="df ac a9">
									<view
										v-for="(stack, stackIndex) in deptStack"
										:key="stack.id"
										@tap="jumpStack(stack, stackIndex)"
										:class="
											stackIndex === deptStack.length - 1
												? 'a9'
												: 'a3'
										"
										class="df ac"
									>
										<view>{{ stack.name }}</view>
										<view
											v-if="
												stackIndex !==
												deptStack.length - 1
											"
											>></view
										>
									</view>
								</view>
								<template v-if="deptStack.length > 0">
									<div
										@click="beforeNode"
										class="to-top f28"
										style="color: #3a9bff"
									>
										上一级
									</div>
								</template>
							</view>
							<view class="mt20">
								<checkbox
									shape="square"
									:disabled="!multiple"
									@tap="handleCheckAllChange"
									color="#3A9BFF"
									:checked="checkAll"
									style="
										transform: scale(0.7);
										margin-left: -12rpx;
									"
								>
									<text style="font-size: 45rpx" class="c6"
										>全选</text
									>
								</checkbox>
							</view>
							<view>
								<view v-if="nodes && nodes.length > 0">
									<view v-for="org in nodes" :key="org.id">
										<view class="df ac jsb node-item">
											<view
												class="df ac"
												@tap="selectChange(org)"
											>
												<radio
													:checked="org.selected"
													:disabled="disableDept(org)"
													color="#3A9BFF"
													style="
														transform: scale(0.7);
													"
												/>
												<view
													v-if="org.type === 'user'"
													class="flex-center"
												>
													<avatar
														:fontsize="28"
														:width="60"
														:name="
															org.name.length > 2
																? org.name.substr(
																		org.name
																			.length -
																			2,
																		2
																  )
																: org.name
														"
													></avatar>
													<view class="ml10 c6">{{
														org.name
													}}</view>
												</view>
												<view v-else class="c6">{{
													org.name
												}}</view>
											</view>
											<view
												style="color: #3a9bff"
												@tap.stop="nextNode(org)"
												v-if="org.type === 'dept'"
												class="f28"
												>下级</view
											>
										</view>
									</view>
								</view>
								<view v-else style="margin-top: -200rpx">
									<diy-empty></diy-empty>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="popup-bottom">
					<view
						v-if="select && select.length > 0"
						class="df ac selected-bottom"
					>
						<view class="text">{{
							`已选择（${select.length}）:`
						}}</view>
						<view class="avatar-slected df ac">
							<view
								class="ml10"
								v-for="selectItem in select"
								:key="selectItem.id"
							>
								<avatar
									:name="
										selectItem.name.slice(
											selectItem.name.length - 2,
											selectItem.name.length
										)
									"
								></avatar>
							</view>
						</view>
					</view>
					<button
						class="primary-button w90 mt20 mb10"
						@tap="submitChoose()"
					>
						确定
					</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
import {
	getOrgTree,
	searchByuserName,
} from '@/subPackagesIndex/pages/index/approval/launch/apis.js'
import { debounce } from '@/common/utils.js'
import avatar from '@/subPackagesIndex/pages/index/approval/mainSub/components/avatar.vue'
import serachButton from '@/subPackagesIndex/components/serach-button/serach-button.vue'
export default {
	components: { avatar, serachButton },
	props: {
		show: {
			type: Boolean,
			value: false,
			default: false,
		},
		title: {
			type: String,
			value: '',
			default: '',
		},
		type: {
			type: String,
			default: '',
		},
		multiple: {
			type: Boolean,
			default: false,
		},
		selected: {
			default: () => {
				return []
			},
			type: Array,
		},
	},
	data() {
		return {
			checkAll: false,
			//选中的项
			select: [],
			deptStack: [],
			nodes: [],
			nowDeptId: [],
			searchUsers: [],
			serachName: '',
		}
	},
	methods: {
		getSearchByuserName(val) {
			searchByuserName(val).then((res) => {
				this.searchUsers = res
				this.selectToLeft(res)
			})
		},
		serachInput(val) {
			let _that = this
			_that.serachName = val
			debounce(_that.getSearchByuserName(val), 1000)
		},
		jumpStack(node, inx) {
			if (inx === this.deptStack.length - 1) {
				return
			}
			const index = this.deptStack.findIndex((i) => i.id === node.id)
			this.deptStack = this.deptStack.slice(0, index + 1)
			this.nowDeptId = node.id
			this.getOrgList()
		},
		init() {
			this.checkAll = false
			this.nowDeptId = null
			this.nodes = []
			this.deptStack = []
			this.searchUsers = []
			this.serachName = ''
			this.select = Object.assign([], this.selected)
			this.selectToLeft(this.nodes)
		},
		selectToLeft(lists) {
			let nodes = lists
			nodes.forEach((node) => {
				for (let i = 0; i < this.select.length; i++) {
					if (this.select[i].id === node.id) {
						node.selected = true
						break
					} else {
						node.selected = false
					}
				}
			})
		},
		//全选
		handleCheckAllChange() {
			this.checkAll = !this.checkAll
			this.nodes.forEach((node) => {
				if (this.checkAll) {
					if (!node.selected && !this.disableDept(node)) {
						node.selected = true
						this.select.push(node)
					}
				} else {
					node.selected = false
					for (let i = 0; i < this.select.length; i++) {
						if (this.select[i].id === node.id) {
							this.select.splice(i, 1)
							break
						}
					}
				}
			})
		},
		disableDept(node) {
			return this.type === 'user' && node.type === 'dept'
		},
		//选择
		selectChange(node) {
			if (node.selected) {
				this.checkAll = false
				for (let i = 0; i < this.select.length; i++) {
					if (this.select[i].id === node.id) {
						this.select.splice(i, 1)
						break
					}
				}
				node.selected = false
			} else if (!this.disableDept(node)) {
				node.selected = true
				let nodes = this.nodes
				if (!this.multiple) {
					nodes.forEach((nd) => {
						if (node.id !== nd.id) {
							nd.selected = false
						}
					})
				}
				if (node.type === 'dept') {
					if (!this.multiple) {
						this.select = [node]
					} else {
						this.select.unshift(node)
					}
				} else {
					if (!this.multiple) {
						this.select = [node]
					} else {
						this.select.push(node)
					}
				}
			}
			console.log(this.select, '---000---this.select--')
		},
		//清空按钮
		clearSelected() {
			let _that = this
			uni.showModal({
				title: '提示',
				content: '您确定要清空已选项吗？',
				showCancel: true,
				confirmColor: '#5374F7',
				success(res) {
					if (res.confirm) {
						_that.checkAll = false
						_that.recover()
					}
				},
			})
		},
		// 清空数据
		recover() {
			this.select = []
			this.nodes.forEach((nd) => (nd.selected = false))
		},
		//下一级
		nextNode(node) {
			if (!node.selected) {
				this.nowDeptId = node.id
				this.deptStack.push(node)
				this.getOrgList()
			}
		},
		//上一级
		beforeNode() {
			if (this.deptStack.length === 0) {
				return
			}
			if (this.deptStack.length < 2) {
				this.nowDeptId = null
			} else {
				this.nowDeptId = this.deptStack[this.deptStack.length - 2].id
			}
			this.deptStack.splice(this.deptStack.length - 1, 1)
			this.getOrgList()
		},
		getOrgList() {
			getOrgTree({
				type: this.type,
				deptId: this.nowDeptId,
			}).then((res) => {
				this.nodes = res
				this.selectToLeft(this.nodes)
			})
		},
		closePopup() {
			this.$refs.orgPickRef.close()
			this.$emit('close')
			this.recover()
		},
		openPopup() {
			this.$refs.orgPickRef.open('bottom')
			this.init()
			this.getOrgList()
		},
		submitChoose() {
			if (this.select && this.select.length === 0) {
				uni.showToast({
					title: '没有选择~',
					icon: 'none',
				})
				return
			}
			this.$emit('submit', this.select)
			this.closePopup()
		},
	},
	watch: {
		show(val) {
			if (val) {
				this.openPopup()
			} else {
				this.closePopup()
			}
		},
	},
}
</script>
<style scoped lang="scss">
.active-checked-box {
	color: #fff;
	background: #2b58de;
	border: 1rpx solid #2b58de !important;
}
.checked-box {
	width: 40rpx;
	height: 40rpx;
	border: 1rpx solid #ccc;
	border-radius: 60rpx;
	margin-right: 10rpx;
}
.popup-bottom {
	display: block;
	height: auto;
	.selected-bottom {
		border-bottom: 1px solid rgba(239, 239, 239, 1);
		padding: 20rpx;
		.text {
			min-width: 120rpx;
		}
	}
}
.popup-content {
	overflow-y: auto;
	height: calc(100vh - 200rpx - 480rpx);
}
.popup-content-selected {
	height: calc(100vh - 280rpx - 480rpx);
}
.node-item {
	border-bottom: 1px solid rgba(239, 239, 239, 1);
	padding: 20rpx 0;
	margin-bottom: 20rpx;
}
.avatar-slected {
	// overflow-x:auto;
	// padding-right: 20rpx;
}
.a9 {
	color: #9a9a9a;
}
.a3 {
	color: #3a9bff;
}
.c6 {
	color: #6c6c6c;
}
/deep/ .empty-bd {
	margin-top: 0 !important;
}
</style>
